<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Full Calendar - Ace Admin</title>
		<meta name="description" content="with draggable and editable events" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />

		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->


		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="assets/css/fullcalendar.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<!--[if lt IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

	</head>

	<body>
		<div class="navbar navbar-inverse">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand" href="/index"><small><b>THPT Dương Bạch Mai</b></small> </a>
					<ul class="nav ace-nav pull-right">
						<li class="light-blue user-profile">
							<a class="user-menu dropdown-toggle" href="#" data-toggle="dropdown">
								<img alt="Jason's Photo" src="assets/avatars/user.jpg" class="nav-user-photo" />
								<span id="user_info">
									<small>Welcome,</small> Ngon Son
								</span>
								<i class="icon-caret-down"></i>
							</a>
							<ul id="user_menu" class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
								<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
								<li><a href="#"><i class="icon-user"></i> Profile</a></li>
								<li class="divider"></li>
								<li><a href="#"><i class="icon-off"></i> Logout</a></li>
							</ul>
						</li>
					</ul><!--/.ace-nav-->

				</div><!--/.container-fluid-->
			</div><!--/.navbar-inner-->
		</div><!--/.navbar-->

		<div class="container-fluid" id="main-container">
			<a href="#" id="menu-toggler"><span></span></a><!-- menu toggler -->

			<div id="sidebar">
				<ul class="nav nav-list">

					<li class="active">
						<a href="calendar.html">
							<i class="icon-calendar"></i>
							<span>Thời khóa biểu</span>
						</a>
					</li>

					<li>
						<a href="#" class="dropdown-toggle">
							<i class="icon-copy"></i>
							<span>Quản lý tin</span>
							<b class="arrow icon-angle-down"></b>
						</a>
						<ul class="submenu">
							<li><a href="elements.html"><i class="icon-double-angle-right"></i> Elements</a></li>
							<li><a href="buttons.html"><i class="icon-double-angle-right"></i> Buttons & Icons</a></li>
						</ul>
					</li>

					<li>
						<a href="tables.html">
							<i class="icon-list-alt"></i>
							<span>Quản lý loại tin</span>

						</a>
					</li>

					<li>
						<a href="tables.html">
							<i class="icon-sitemap"></i>
							<span>Quản lý lớp học</span>

						</a>
					</li>

					<li>
						<a href="typography.html">
							<i class="icon-book"></i>
							<span>Quản lý môn học</span>

						</a>
					</li>

					<li>
						<a href="form-elements.html">
							<i class="icon-group"></i>
							<span>Quản lý học sinh</span>

						</a>
					</li>

					<li>
						<a href="elements.html">
							<i class="icon-user-md"></i>
							<span>Quản lý giáo viên</span>

						</a>
					</li>

					<li>
						<a href="widgets.html">
							<i class="icon-list-ol"></i>
							<span>Quản lý điểm</span>

						</a>
					</li>

					<li>
						<a href="gallery.html">
							<i class="icon-picture"></i>
							<span>Hình ảnh hoạt động</span>

						</a>
					</li>
				</ul><!--/.nav-list-->
				<div id="sidebar-collapse"><i class="icon-double-angle-left"></i></div>
			</div><!--/#sidebar-->


			<div id="main-content" class="clearfix">

				<div id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home"></i> <a href="#">Home</a><span class="divider"><i class="icon-angle-right"></i></span></li>
						<li class="active">Thời khóa biểu</li>
					</ul><!--.breadcrumb-->

					<div id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input autocomplete="off" id="nav-search-input" type="text" class="input-small search-query" placeholder="Search ..." />
								<i id="nav-search-icon" class="icon-search"></i>
							</span>
						</form>
					</div><!--#nav-search-->
				</div><!--#breadcrumbs-->



				<div id="page-content" class="clearfix">

					<div class="page-header position-relative">
						<h1>Thời khóa biểu <small><i class="icon-double-angle-right"></i> with draggable and editable events</small></h1>
					</div><!--/page-header-->



					<div class="row-fluid">
						<!-- PAGE CONTENT BEGINS HERE -->

						<div class="row-fluid">
							<div class="span9">
								<div class="space"></div>
								<div id='calendar'></div>
							</div>

							<div class="span3">
								<div class="widget-box transparent">
									<div class="widget-header">
										<h4>Draggable events</h4>
									</div>
									<div class="widget-main">
										<div id='external-events'>
											<div class='external-event label-grey' data-class="label-grey"><i class="icon-move"></i> My Event 1</div>
											<div class='external-event label-success' data-class="label-success"><i class="icon-move"></i> My Event 2</div>
											<div class='external-event label-important' data-class="label-important"><i class="icon-move"></i> My Event 3</div>
											<div class='external-event label-purple' data-class="label-purple"><i class="icon-move"></i> My Event 4</div>
											<div class='external-event label-yellow' data-class="label-yellow"><i class="icon-move"></i> My Event 5</div>
											<div class='external-event label-pink' data-class="label-pink"><i class="icon-move"></i> My Event 6</div>
											<div class='external-event label-info' data-class="label-info"><i class="icon-move"></i> My Event 7</div>
											<label>
												<input type='checkbox' class="ace-checkbox" id='drop-remove' /> <span class="lbl"> Remove after drop</span>
											</label>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- PAGE CONTENT ENDS HERE -->
					</div><!--/row-->

				</div><!--/#page-content-->


				<div id="ace-settings-container">
					<div class="btn btn-app btn-mini btn-warning" id="ace-settings-btn">
						<i class="icon-cog"></i>
					</div>
					<div id="ace-settings-box">
						<div>
							<div class="pull-left">
								<select id="skin-colorpicker" class="hidden">
									<option data-class="default" value="#438EB9">#438EB9</option>
									<option data-class="skin-1" value="#222A2D">#222A2D</option>
									<option data-class="skin-2" value="#C6487E">#C6487E</option>
									<option data-class="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>
						<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-header" /><label class="lbl" for="ace-settings-header"> Fixed Header</label></div>
						<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-sidebar" /><label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label></div>
					</div>
				</div><!--/#ace-settings-container-->


			</div><!-- #main-content -->


		</div><!--/.fluid-container#main-container-->

		<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
			<i class="icon-double-angle-up icon-only"></i>
		</a>

		<!-- basic scripts -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-1.9.1.min.js'>\x3C/script>");
		</script>

		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<script type="text/javascript" src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>

		<script type="text/javascript" src="assets/js/jquery.ui.touch-punch.min.js"></script>

		<script type="text/javascript" src="assets/js/fullcalendar.min.js"></script>

		<script type="text/javascript" src="assets/js/bootbox.min.js"></script>


		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>


		<!-- inline scripts related to this page -->

		<script type="text/javascript">

			$(function() {

				/* initialize the external events
				 -----------------------------------------------------------------*/

				$('#external-events div.external-event').each(function() {

					// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
					// it doesn't need to have a start or end
					var eventObject = {
						title: $.trim($(this).text()) // use the element's text as the event title
					};

					// store the Event Object in the DOM element so we can get to it later
					$(this).data('eventObject', eventObject);

					// make the event draggable using jQuery UI
					$(this).draggable({
						zIndex: 999,
						revert: true, // will cause the event to go back to its
						revertDuration: 0  //  original position after the drag
					});

				});




				/* initialize the calendar
				 -----------------------------------------------------------------*/

				var date = new Date();
				var d = date.getDate();
				var m = date.getMonth();
				var y = date.getFullYear();


				var calendar = $('#calendar').fullCalendar({
					buttonText: {
						prev: '<i class="icon-chevron-left"></i>',
						next: '<i class="icon-chevron-right"></i>'
					},
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'month,agendaWeek,agendaDay'
					},
					events: [
						{
							title: 'All Day Event',
							start: new Date(y, m, 1),
							className: 'label-important'
						},
						{
							title: 'Long Event',
							start: new Date(y, m, d - 5),
							end: new Date(y, m, d - 2),
							className: 'label-success'
						},
						{
							title: 'Some Event',
							start: new Date(y, m, d - 3, 16, 0),
							allDay: false
						}]
							,
					editable: true,
					droppable: true, // this allows things to be dropped onto the calendar !!!
					drop: function(date, allDay) { // this function is called when something is dropped

						// retrieve the dropped element's stored Event Object
						var originalEventObject = $(this).data('eventObject');
						var $extraEventClass = $(this).attr('data-class');


						// we need to copy it, so that multiple events don't have a reference to the same object
						var copiedEventObject = $.extend({}, originalEventObject);

						// assign it the date that was reported
						copiedEventObject.start = date;
						copiedEventObject.allDay = allDay;
						if ($extraEventClass)
							copiedEventObject['className'] = [$extraEventClass];

						// render the event on the calendar
						// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
						$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

						// is the "remove after drop" checkbox checked?
						if ($('#drop-remove').is(':checked')) {
							// if so, remove the element from the "Draggable Events" list
							$(this).remove();
						}

					}
					,
					selectable: true,
					selectHelper: true,
					select: function(start, end, allDay) {

						bootbox.prompt("New Event Title:", function(title) {
							if (title !== null) {
								calendar.fullCalendar('renderEvent',
										{
											title: title,
											start: start,
											end: end,
											allDay: allDay
										},
								true // make the event "stick"
										);
							}
						});


						calendar.fullCalendar('unselect');

					}
					,
					eventClick: function(calEvent, jsEvent, view) {

						var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
						form.append("<input autocomplete=off type=text value='" + calEvent.title + "' /> ");
						form.append("<button type='submit' class='btn btn-small btn-success'><i class='icon-ok'></i> Save</button>");

						var div = bootbox.dialog(form,
								[
									{
										"label": "<i class='icon-trash'></i> Delete Event",
										"class": "btn-small btn-danger",
										"callback": function() {
											calendar.fullCalendar('removeEvents', function(ev) {
												return (ev._id == calEvent._id);
											})
										}
									}
									,
									{
										"label": "<i class='icon-remove'></i> Close",
										"class": "btn-small"
									}
								]
								,
								{
									// prompts need a few extra options
									"onEscape": function() {
										div.modal("hide");
									}
								}
						);

						form.on('submit', function() {
							calEvent.title = form.find("input[type=text]").val();
							calendar.fullCalendar('updateEvent', calEvent);
							div.modal("hide");
							return false;
						});


						//console.log(calEvent.id);
						//console.log(jsEvent);
						//console.log(view);

						// change the border color just for fun
						//$(this).css('border-color', 'red');

					}

				});



			})

		</script>

	</body>
</html>
